<template>
  <div class="flex-col">
    <n-form
      ref="$form"
      :model="model"
      label-placement="left"
      label-align="right"
      require-mark-placement="left"
      :label-width="132"
    >
      <div v-show="step === 1">
        <n-form-item
          label="被测对象选择"
          path="testObjectId"
          :rule="{ required: true, message: '请选择被测对象' }"
        >
          <AsyncSelect
            v-model:value="model.testObjectId"
            :options="getObjectList"
            label-key="name"
            value-key="id"
            placeholder="请选择被测对象"
            @update:value="handleObject"
            @async-load="handleLoad"
          />
        </n-form-item>
        <n-form-item label="被测对象信息">
          <div :class="['w-full rounded-6  p-24', appStore.isDeep ? 'bg-#2BA1FF0A' : 'bg-#f8f9fa']">
            <n-form-item :label="result.label" :label-width="120">
              <n-input :value="result.text" :disabled="true" />
            </n-form-item>
            <n-form-item label="说明" :label-width="120">
              <n-input
                v-model:value="objectInfo.info"
                clearable
                :maxlength="300"
                show-count
                type="textarea"
                :autosize="{
                  minRows: 3,
                }"
                :disabled="true"
              />
            </n-form-item>
            <n-form-item label="主要代码" :label-width="120">
              <CodeView :root-path="objectInfo.extractFilePath" />
            </n-form-item>
          </div>
        </n-form-item>
      </div>
      <div v-show="step === 2">
        <n-form-item label="被测对象名称">
          <n-input v-model:value="objectInfo.name" :disabled="true"></n-input>
        </n-form-item>
        <n-form-item label="元任务类型">
          <AsyncSelect
            v-model:value="objectInfo.metaTaskTypeId"
            :options="getMateTaskTypeList"
            label-key="metaTaskName"
            value-key="id"
            :disabled="true"
          />
        </n-form-item>
        <n-form-item label="测试模式">
          <AsyncSelect
            v-model:value="objectInfo.testModeId"
            :options="getModeList"
            label-key="testModeName"
            value-key="id"
            :disabled="true"
          />
        </n-form-item>
        <n-form-item label="测试指标">
          <MyTags
            label-key="testIndicatorName"
            value-key="id"
            :options="getTestIndicatorList"
            :extra-params="{
              metaTaskTypeId: objectInfo.metaTaskTypeId,
              testModeId: objectInfo.testModeId,
            }"
            :disabled="true"
            :auto-select-all="true"
          />
        </n-form-item>
        <n-form-item label="评估指标">
          <MyTags
            label-key="estimateIndicatorName"
            value-key="id"
            :options="getEvaluateIndicatorList"
            :extra-params="{
              metaTaskTypeId: objectInfo.metaTaskTypeId,
              testModeId: objectInfo.testModeId,
            }"
            :disabled="true"
            :auto-select-all="true"
          />
        </n-form-item>
      </div>
    </n-form>
    <Teleport v-if="isMounted && [1, 2].includes(step)" to="#step-control">
      <div class="my-btn-group mt-32">
        <n-button v-if="step != 1" @click="emits('prev')">上一步</n-button>
        <n-button :color="appStore.buttonColor" @click="handleNext">下一步</n-button>
      </div>
    </Teleport>
  </div>
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
import { useMounted } from '@/hooks/useMounted'
import { objectMergLeft } from '@/utils/common'
import * as testObjectApi from '@/api/testObject'
defineOptions({
  name: 'ObjectSelect',
})
const appStore = useAppStore()
const $form = ref(null)
const model = ref({
  testObjectId: null,
})
const emits = defineEmits(['change', 'next', 'prev'])
const props = defineProps({
  step: {
    type: Number,
    default: null,
  },
  importObjectName: {
    type: String,
    default: null,
  },
})
const { isMounted } = useMounted()
const objectInfo = ref({
  testObjectTypeName: null,
  tagName: null,
  info: null,
  extractFilePath: null,
  name: null,
  metaTaskTypeId: null,
  testModeId: null,
})

const result = computed(() => {
  if (objectInfo.value.tagName) {
    if (objectInfo.value.tagName === '算法') {
      return {
        label: '对象类型',
        text: objectInfo.value.testObjectTypeName,
      }
    } else {
      return {
        label: '对象类型+标签1',
        text: `${objectInfo.value.testObjectTypeName}(${objectInfo.value.tagName})`,
      }
    }
  } else {
    return {
      label: '对象类型+标签1',
      text: '',
    }
  }
})

function getObjectList() {
  return testObjectApi.listAll()
}

function getMateTaskTypeList() {
  return testObjectApi.metaTaskTypeList()
}

function getModeList() {
  return testObjectApi.modeList()
}

function getTestIndicatorList(params) {
  return testObjectApi.testIndicatorList(params)
}
function getEvaluateIndicatorList(params) {
  return testObjectApi.evaluateIndicator(params)
}

function handleObject(_, current) {
  let res = objectMergLeft(objectInfo.value, current)
  objectInfo.value = res
  emits('change', {
    testObjectId: current.id,
    testObjectTypeName: current.testObjectTypeName,
    tagName: current.tagName,
    metaMissionType: current.metaTaskTypeId,
    testModeId: current.testModeId,
  })
}

function handleLoad(list) {
  if (props.importObjectName) {
    const current = list.find((item) => item['name'] === props.importObjectName)
    if (current) {
      model.value.testObjectId = current['id']
      handleObject(false, current)
    }
  }
}

function handleNext() {
  $form.value.validate((errors) => {
    if (!errors) {
      emits('next')
    }
  })
}
</script>
<style lang="scss" scoped></style>
